<template>
  <div>
    <el-container style=" border: 1px solid var(--el-border-color);border-radius: 0; ">
      <el-header >
        <el-container>
          <el-aside style="background-color: white">
            <div class="sub_title_bar light">
              <div style="display: flex; justify-content: space-around;align-items: center">
                <h4><b>菜单管理</b></h4>
                <el-button @click="addParentMenu">添加父级菜单</el-button>
              </div>
            </div>
          </el-aside>
          <el-main>设置动作
          </el-main>
        </el-container>
      </el-header>
      <el-container  >
            <el-aside style="background-color: white;">
              <draggable
                  :list="state.menu"
                  ghost-class="ghost"
                  chosen-class="chosenClass"
                  animation="300"
                  @start="onStart"
                  @end="onEnd"
                  item-key="index"
              >
                <template #item="{ element:ple ,index:pleIndex }">
                  <div class="item">
                    <el-menu
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                    >
                      <el-sub-menu :index="ple.name" >
                        <template #title>
                          <div @mouseenter="ple.buttonShow=true" @mouseleave="ple.buttonShow=false" style="display: flex; align-items: center; width: 180px; justify-content: space-between">
                            <div>
                              <el-icon>
                                <location/>
                              </el-icon>
                              <span>{{ ple.name }}</span>
                            </div>
                            <div  v-if="ple.buttonShow">
                              <el-icon @click.stop="itemSubAddClick(ple,pleIndex)"><Plus /></el-icon>
                              <el-icon @click.stop="itemEditParentClick(ple,pleIndex)"><EditPen /></el-icon>
                              <el-icon @click.stop="itemDeleteParentClick(pleIndex)"><DeleteFilled /></el-icon>
                            </div>
                          </div>
                        </template>
                        <draggable
                            :list="ple.sub_button"
                            ghost-class="ghost"
                            chosen-class="chosenClass"
                            animation="300"
                            @start="onStart"
                            @end="onEnd"
                            item-key="index"
                        >
                          <template #item="{ element,index }">
                            <el-menu-item @click="menuItemClick(element)" :index="element.key" @mouseenter.prevent="element.itemShow=true" @mouseleave.prevent="element.itemShow=false">
                              <template #default>
                                <div style="display: flex; align-items: center; width: 180px; justify-content: space-between">
                                  <div>
                                     {{ element.name }}
                                  </div>
                                  <div v-if="element.itemShow">
                                    <el-icon @click.stop="subItemEditClick(element,index)"><EditPen /></el-icon>
                                    <el-icon @click.stop="itemDeleteClick(ple,index)"><DeleteFilled /></el-icon>
                                  </div>
                                </div>
                              </template>
                            </el-menu-item>
                          </template>
                        </draggable>
                      </el-sub-menu>

                    </el-menu>
                  </div>
                </template>
              </draggable>
            </el-aside>

            <el-main v-if="showMain" style="padding-top: 0px; min-height: 300px; border: 1px solid  var(--el-border-color); border-radius: 0;">
                <div v-show="!sendMsgShow && !msgUrl" class="action_content init" id="index" style="display: block;">
                  <p class="action_tips">请选择订阅者点击菜单后，公众号做出的相应动作</p>
                  <div style="display: flex;margin-top: 60px; margin-left:  20%; align-items: center;text-align: center">
                    <div @click="sendMsgShow=true" style="display: flex;flex-direction: column;margin-left: 15px;">
                      <i class="icon_menu_action send"></i>
                      <strong>发送信息</strong>
                    </div>
                    <div @click="msgUrl=true" style="display: flex;flex-direction: column;margin-left: 35px;">
                      <i class="icon_menu_action url"></i>
                      <strong>跳转到网页</strong>
                    </div>
                  </div>
                </div>
                <div v-show="sendMsgShow" style="margin-top: 20px;">
                  <el-tabs type="border-card" >
                    <el-tab-pane>
                      <template #label>
                        <el-icon><EditPen /></el-icon>
                        <span style="margin-left: 5px;">文字消息</span>
                      </template>
                      <el-input
                          v-model="textarea2"
                          maxlength="600"
                          :autosize="{ minRows: 6, maxRows: 10 }"
                          type="textarea"
                          show-word-limit
                          placeholder="请输入"
                      />
                    </el-tab-pane>
                    <el-tab-pane>
                      <template #label>
                        <el-icon><Microphone /></el-icon>
                        <span style="margin-left: 5px;">语音消息</span>
                      </template>
                      <el-input
                          v-model="textarea2"
                          maxlength="600"
                          :autosize="{ minRows: 6, maxRows: 10 }"
                          type="textarea"
                          show-word-limit
                          placeholder="请输入"
                      />
                    </el-tab-pane>
                    <el-tab-pane>
                      <template #label>
                        <el-icon><PictureFilled /></el-icon>
                        <span style="margin-left: 5px;">图片消息</span>
                      </template>
                      <el-input
                          v-model="textarea2"
                          maxlength="600"
                          :autosize="{ minRows: 6, maxRows: 10 }"
                          type="textarea"
                          show-word-limit
                          placeholder="请输入"
                      />
                    </el-tab-pane>
                    <el-tab-pane>
                      <template #label>
                        <el-icon><VideoCameraFilled /></el-icon>
                        <span style="margin-left: 5px;">视频消息</span>
                      </template>
                      <el-input
                          v-model="textarea2"
                          maxlength="600"
                          :autosize="{ minRows: 6, maxRows: 10 }"
                          type="textarea"
                          show-word-limit
                          placeholder="请输入"
                      />
                    </el-tab-pane>

                    <el-tab-pane>
                      <template #label>
                        <el-icon><Ticket /></el-icon>
                        <span style="margin-left: 5px;">图文消息</span>
                      </template>
                      <el-input
                          v-model="textarea2"
                          maxlength="600"
                          :autosize="{ minRows: 6, maxRows: 10 }"
                          type="textarea"
                          show-word-limit
                          placeholder="请输入"
                      />
                    </el-tab-pane>
                  </el-tabs>

                  <div style="margin-top: 20px; display: flex; justify-content: center">
                     <el-button type="primary" @click="saveSendMsg()">保存</el-button>
                     <el-button  @click="sendMsgShow=false; msgUrl=false; ">返回</el-button>
                  </div>
                </div>
                <div v-show="msgUrl" style="padding-left: 80px; margin-top: 60px;">
                  <p class="action_tips">订阅者点击该子菜单会跳到以下链接</p>
                  <div style="margin-top:  20px;">
                     <el-input style="width: 400px;" size="large" v-model="url" placeholder="请输入跳转url"/>
                  </div>
                   <div style="margin-top:  20px;">
                      <el-button type="primary" @click="saveUrl">确定</el-button>
                     <el-button @click="sendMsgShow=false; msgUrl=false; ">返回 </el-button>
                   </div>
                </div>
            </el-main>
            <el-main v-else="showMain" style="padding-top: 0px; min-height: 300px; border: 1px solid  var(--el-border-color); border-radius: 0;">
                 <div style=" margin:0 auto;text-align: center; line-height: 300px;">先添加一个菜单，然后开始为其设置响应动作</div>
            </el-main>
      </el-container>
      <el-footer style="margin-top: 20px;display:flex;justify-content: center">
        <el-button type="primary" size="large" style="width: 200px;" @click="publish">发布</el-button>
      </el-footer>
    </el-container>

    <el-dialog
        v-model="centerDialogVisible"
        title="输入提示框"
        width="30%"
        destroy-on-close
        center
        draggable
    >
    <el-input v-model="inputMenu" size="large" placeholder="菜单名称名字不多于5个汉字或10个字母"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addMenu">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
        v-model="centerSubDialogVisible"
        title="子菜单输入提示框"
        width="30%"
        destroy-on-close
        center
        draggable
    >
      <el-input v-model="inputSubMenu" size="large" placeholder="子菜单名称名字不多于5个汉字或10个字母"></el-input>
      <template #footer>
                              <span class="dialog-footer">
                                <el-button @click="centerSubDialogVisible = false">取消</el-button>
                                <el-button type="primary" @click="addSubMenu">确认</el-button>
                              </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {ref, reactive, toRaw} from "vue";
import usePublicAccount from '/@/stores/modules/publicaccount'
import draggable from "vuedraggable";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
import {putObj} from "/@/api/publicaccount/hmPublicAccount";
/*
draggable 对CSS样式没有什么要求万物皆可拖拽
:list="state.list"         //需要绑定的数组
ghost-class="ghost"        //被替换元素的样式
chosen-class="chosenClass" //选中元素的样式
animation="300"            //动画效果
@start="onStart"           //拖拽开始的事件
@end="onEnd"               //拖拽结束的事件
*/
const accountState = usePublicAccount();
console.info("accountState", accountState)

const state = reactive({
  //需要拖拽的数据，拖拽后数据的顺序也会变化
  menu: toRaw((accountState.getMenu.menu || {button: []}).button)
});

console.info(state)


//拖拽开始的事件
const onStart = () => {
  console.log("开始拖拽");
};

//拖拽结束的事件
const onEnd = () => {
  console.log("结束拖拽");
};

const selectItem = ref({});
const menuItemClick = (item) => {

  selectItem.value = item;
  console.info("item",item,"selectItem",selectItem);
  showMain.value=true;
  sendMsgShow.value=false;
  msgUrl.value=false;

  if(item.type==='view' ){
      msgUrl.value = true;
      if(item.url) {
        url.value = item.url;
      }else{
        url.value ='';
      }
  }

  if(item.type==='click' ){
    if(item.msgContext) {
      sendMsgShow.value=true;
      if(item.msgContext.msgtype==='text') {
        textarea2.value = item.msgContext.text.content;
      }
    }else{
         textarea2.value ='';
    }
  }


}

const addParentMenu = () => {
  centerDialogVisible.value=true;
  if(state.menu.length >=3){
    ElMessageBox.alert("已超过最大数量", "系统提示", { type: 'error' });
    return;
  }

}
const addMenu=()=>{
    if(inputMenu.value === ''){
       ElMessageBox.alert("请输入菜单名称", "系统提示", { type: 'error' });
       return;
    }
    console.info("dialogMode.value",dialogMode.value);
    if(state.menu.length >=3 && dialogMode.value=== -1){
      ElMessageBox.alert("已超过最大数量", "系统提示", { type: 'error' });
      return;
    }

    if(dialogMode.value == -1){
      state.menu.push({
         buttonShow: false,
         name:inputMenu.value,
         sub_button: [],
         type:'list'
      })
    }else{
      const item=  state.menu[dialogMode.value];
      console.info("item",item);
      item.name=inputMenu.value;
    }
    centerDialogVisible.value = false;
    dialogMode.value = -1;
    inputMenu.value ='';
}

const selectParentItem = ref({});

const addSubMenu = () =>{
    if(inputSubMenu.value === ''){
        ElMessageBox.alert("请输入子菜单名称", "系统提示", { type: 'error' });
        return;
    }
    const buttons= selectParentItem.value.sub_button;
    if(buttons&&buttons.length>4){
        ElMessageBox.alert("子菜单不超过5个", "系统提示", { type: 'error' });
        return;
    }
    console.info("dialogSubMode.value",dialogSubMode.value);
    if(dialogSubMode.value === -1){
      buttons.push({
         name: inputSubMenu.value,
         key: accountState.selectid+'_'+Date.now()
      })
    }else{
       selectItemMenu.value.name=inputSubMenu.value;
    }
    inputSubMenu.value = '';
    centerSubDialogVisible.value=false;
    textarea2.value='';
    url.value = '';
}


const itemEditParentClick = (item,index) =>{
    centerDialogVisible.value=true;
    inputMenu.value=item.name;
    dialogMode.value = index;
    selectParentItem.value=item;
}
const subItemEditClick = (item,index) => {
    centerSubDialogVisible.value =true;
    selectItemMenu.value = item;
    inputSubMenu.value = item.name;
    dialogSubMode.value = index;
}

const saveUrl = ()=>{
  selectItem.value.url = url.value;
  selectItem.value.type='view';
  ElMessageBox.alert("保存成功,发布后才能生效", "系统提示", { type: 'info' });
}

const saveSendMsg = ()=>{
    selectItem.value.msgContext = {
        "text": {
           "content": textarea2.value
         },
       "msgtype": "text"
    }
    selectItem.value.type='click';
    ElMessageBox.alert("保存成功,发布后才能生效", "系统提示", { type: 'info' });
}

const selectItemMenu = ref({});

const itemSubAddClick = (item,index) =>{
    console.info("itemSubAddClick");
    centerSubDialogVisible.value=true;
    selectItemMenu.value=item;
    selectParentItem.value=item;
}

const itemDeleteParentClick = (index)=>{
   console.info("itemDeleteParentClick",index);
   state.menu.splice(index,1);

}

const itemDeleteClick =(item,index)=>{
    console.info("itemDeleteClick",item,index);
    if(item&&item.sub_button){
        item.sub_button.splice(index,1);
    }
}
const itemClick = (event) =>{

}
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)

}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const  buttonShow = ref(false);
const inputMenu = ref("");
const mouseEnter = () => {
    console.info("mouseEnter..");
}

const showMain = ref(false);
const sendMsgShow = ref(false);
const msgUrl = ref(false);
const textarea2 = ref("");
const url = ref("");
const centerDialogVisible = ref(false);
const dialogMode = ref(-1);
const dialogSubMode = ref(-1);

const centerSubDialogVisible = ref(false);
const inputSubMenu = ref("");

const router = useRouter();
const publish = () => {
  const menu = {
      "menu": {
          "button": state.menu
      }
  }
  const form = {
      username: accountState.selectid,
      menu: JSON.stringify(menu)
  };
  console.info("Form",form);
  putObj(form).then(response => {
    ElMessage({
      type: 'success',
      message: '发布成功',
    });
    router.push('/tool/account');
  });

}

</script>
<style scoped>
.itxst {
  width: 600px;
  display: flex;
}

.itxst > div:nth-of-type(1) {
  flex: 1;
}

.itxst > div:nth-of-type(2) {
  width: 270px;
  padding-left: 20px;
}

.item {
  border: solid 1px #eee;
  /*padding: 6px 10px;*/
  text-align: left;
}

.item:hover {
  cursor: move;
}

.item + .item {
  margin-top: 10px;
}

.ghost {
  border: solid 1px rgb(19, 41, 239);
}

.chosenClass {
  background-color: #f1f1f1;
}
.icon_menu_action.send{
  width: 144px;
  height: 144px;
  vertical-align: middle;
  display: inline-block;
  background-image: url(@/assets/images/advanced_menu_setting_z.png);
  background-repeat: no-repeat;
}

.icon_menu_action.url{
  width: 144px;
  height: 144px;
  vertical-align: middle;
  display: inline-block;
  background-image: url(@/assets/images/advanced_menu_setting_z.png);
  background-repeat: no-repeat;
  background-position: 0 -308px;
}

.icon_menu_action.send{
  background-position: 0 0;
}
</style>
